<template>
	<view>
		<view class="flex m-b-24" @click="goDetali()">
			<image :src="$util.img(imgReturn(item.images))" class="w-222 h-180 m-r-22" mode=""></image>
			<view class="flex_c h-180" style="width: 450rpx;height: 180rpx;">
				<view class="flex_b">
					<view class="font-30 font-weight hiddenSty">{{item.shop_name||item.stash_name||''}}</view>
					<!-- <view class="grey font-24" v-if="type=='chuzu'||type=='shangQuan'">{{item.browse_num||0}}人浏览</view> -->
					<!-- <view class="f-t font-30" v-if="type=='jqcj'">3天</view> -->
					<view class="dingJin white font-22 lh-40 textC" v-if="type=='yuYue'&&item.pay_status==1">已交定金</view>
					<view class="dingJin white font-22 lh-40 textC" style="background-color: #94969a;"
						v-if="type=='yuYue'&&item.pay_status==0">未交定金</view>
				</view>
				<view class=" font-24" v-if="type=='zhuanrang'">{{item.city}}-{{item.district}} | {{item.area||0}}m²</view>
				<view class=" font-24 grey hiddenSty"
					v-if="type=='chuzu'||type=='jqcj'||type=='myShop'||type=='shangQuan'||type=='yuYue'">{{item.address}}
				</view>
				<view class="m-b-30 font-24" v-if="type=='shop'">{{item.area||0}}m²/{{item.status_text}}</view>
				<scroll-view class="hiddenStyA" scroll-x="true" style="height: 40rpx;"
					v-if="type=='cangku'||type=='chuzu'||type=='zhuanrang'||type=='jqcj'||type=='myShop'||type=='shangQuan'||type=='yuYue'">
					<view v-for="(itemA,index) in labelReturn(item.label)" :key="index"
						style="border: 1rpx solid #e5e9ef;padding: 0 4rpx; border-radius: 5rpx;display: inline-block;height: 32rpx;overflow: auto;" class="font-22 m-r-8">
						{{itemA}}
					</view>
				</scroll-view>
				<view>
					<text class="font-36 f-t font-weight" v-if="type=='cangku'">{{item.price}}/月</text>
					<text class="font-36 f-t font-weight" v-else>{{item.month_rent}}/月</text>
					<!-- <text class="m-l-40 font-28" v-if="type=='chuzu'">{{item.area}}m²</text> -->

					<text class="m-l-30"
						v-if="type=='cangku'||type=='jqcj'||type=='myShop'||type=='shangQuan'||type=='yuYue'||type=='chuzu'">{{item.area||0}}m²</text>
					<!-- <text class=" font-20 grey"
						v-if="type=='zhuanrang'">更新时间：{{$util.timeYyr(item.createtime*1000)}}</text> -->
				</view>
			</view>
		</view>
	</view>
</template>

<!-- 
shop  首页商铺
cangku  仓库
chuzu  商铺出租列表
zhuanrang  商铺转让
jqcj 近期成交
myShop 我的商铺
shangQuan 商圈
yuYue 我的预约
-->


<script>
	export default {
		name: "shopItem",
		props: ['type', 'item', 'activeType'],
		data() {
			return {

			};
		},
		methods: {
			goDetali() {
				if (this.activeType == 'select' && this.type == 'chuzu') {
					let obj = {
						id: this.item.id,
						name: this.item.shop_name
					}
					uni.$emit('myShop', obj)
					uni.navigateBack({
						delta: 1
					})
					return
				}
				if (this.type == 'cangku') {
					this.$util.redirectTo('/otherpages/cangKuDetali/cangKuDetali', {
						type: this.type,
						id: this.item.id
					})
				} else {
					this.$util.redirectTo('/otherpages/shopDetali/shopDetali', {
						type: this.type,
						id: this.item.id
					})
				}
			},
			imgReturn(img) {
				if (img) {
					return img.split(',')[0]
				} else {
					return ''
				}
			},
			labelReturn(label) {
				if (label) {
					return label.split(',')
				} else {
					return []
				}
			}
		}

	}
</script>

<style lang="scss">
	.hiddenSty {
		/*强制文本在一行内显示*/
		/* 第一步：让文字强制一行显示 */
		white-space: nowrap;
		/* 第二步：溢出隐藏 */
		overflow: hidden;
		/* 第三步：溢出的内容省略号显示 */
		text-overflow: ellipsis;
	}
	.hiddenStyA {
		white-space: nowrap;
	}
	.dingJin {
		width: 100rpx;
		height: 40rpx;
		border-radius: 8rpx;
		background-color: #e5632b;
	}
</style>
